<template>
  <div>
    <el-card style="min-width: 1200px">
      <div class="tableSelectWrap">
        <el-form
          ref="checkAccountForm"
          :model="commandForm"
          label-width="100px"
          style="margin-bottom: -10px"
        >
          <el-row>
            <el-col :span="7">
              <el-form-item label="选择时间" prop="billDate">
                <el-date-picker
                  style="width: 100%"
                  v-model="commandForm.billDate"
                  type="month"
                  placeholder="选择日期"
                  :default-time="['00:00:00', '23:59:59']"
                  :clearable="false"
                  value-format="yyyy-MM"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="支付渠道" prop="payformChannel">
                <el-select
                  v-model="commandForm.payformChannel"
                  class="leftSelect"
                  style="width: 100%"
                  placeholder="请选择支付渠道"
                >
                  <el-option
                    v-for="(item, index) of payChannel"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="" prop="payType" label-width="0" v-if="commandForm.payformChannel">
                <el-select
                class="rightSelect"
                  v-model="commandForm.payType"
                  style="width: 100%"
                  placeholder="请选择"
                  clearable
                >
                <el-option v-for="item,index of payChannelTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item> -->
            </el-col>
            <el-col :span="7" :offset="1" style="min-width: 170px">
              <el-button class="width120" @click="this.resetFields"
                >重置</el-button
              >
              <el-button
                type="primary"
                class="width120"
                @click="
                  () => {
                    this.dataForm = JSON.parse(
                      JSON.stringify(this.commandForm)
                    );
                    this.getList();
                  }
                "
                >查询</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 15px; min-width: 1200px">
      <div class="switch">
        <el-switch v-model="isFixedTableH" inactive-text="固定表头">
        </el-switch>
      </div>
      <el-table
        :height="fixedTableHeight"
        :data="dataList"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        >
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="billDate"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.billDate ? scope.row.billDate : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="payformChannelName"
          align="center"
          label="支付渠道"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.payformChannelName
                  ? scope.row.payformChannelName
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="payAmount"
          align="center"
          label="支付金额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.isBillSuccess
                  ? scope.row.payAmount == "0"
                    ? "0.00"
                    : scope.row.payAmount
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="payRecordNum"
          align="center"
          label="支付笔数"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.isBillSuccess ? scope.row.payRecordNum : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="refundAmount"
          align="center"
          label="退款金额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.isBillSuccess
                  ? scope.row.refundAmount == "0"
                    ? "0.00"
                    : scope.row.refundAmount
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="refundRecordNum"
          align="center"
          label="退款笔数"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.isBillSuccess ? scope.row.refundRecordNum : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="handleStatusName"
          align="center"
          label="对账结果"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
              v-if="scope.row.billDate == newDate"
            >
              当日对账结果于次日12:00生成
            </div>
            <div
              v-else
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ !scope.row.isBillSuccess ? "-" : scope.row.handleStatusName }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column show-overflow-tooltip
          prop="act"
          width="100"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"
              >查看差错</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
  </div>
</template>

<script>
import mixin from "@/mixins/mixin";
import { getUserInfo } from "@/utils/public";

export default {
  name: "checkAccountCollect",
  mixins: [mixin],
  data() {
    return {
      newDate: this.$moment(new Date()).format("YYYY-MM-DD"),
      pickerOptions: {
        disabledDate: (time) => {
          return this.checkTime(time);
        },
      },
      mixinViewModuleOptions: {
        createdIsNeed: false,
      },
      commandForm: {
        billDate: this.$moment().format("YYYY-MM"),
        payformChannel: "",
        // payType: '',
      },
      // payChannel:
      //   this.getUserInfo().userType !== "main_admin" &&
      //   this.getUserInfo().userType !== "main_user"
      //     ? [
      //         {
      //           label: "微信",
      //           value: "wechat",
      //         },
      //         {
      //           label: "支付宝",
      //           value: "ali",
      //         },
      //         {
      //           label: "银联",
      //           value: "union",
      //         },
      //         {
      //           label: "抖音",
      //           value: "douyin",
      //         },
      //         {
      //           label: "银盛",
      //           value: "yse",
      //         },
      //       ]
      //     : [
      //         {
      //           label: "汇付",
      //           value: "ada",
      //         },
      //         {
      //           label: "微信",
      //           value: "wechat",
      //         },
      //         {
      //           label: "支付宝",
      //           value: "ali",
      //         },
      //         {
      //           label: "银联",
      //           value: "union",
      //         },
      //         {
      //           label: "抖音",
      //           value: "douyin",
      //         },
      //         {
      //           label: "银盛",
      //           value: "yse",
      //         },
      //       ],
      payChannel: [],
      payChannelType: this.$store.state.channelListType,
      payChannelTypeList: [],
      dataList: [],
    };
  },
  created() {
    this.dataForm = JSON.parse(JSON.stringify(this.commandForm));
    // console.log(this.$store.state.channelList);
    this.getList();
    this.getChannelList();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.getList();
        }
      },
    },
    deep: true,
  },
  methods: {
    getUserInfo,
    getChannelList() {
      this.$http.get("/api/dict/channelList").then((res) => {
        if (res.code === "0000") {
          var a = [{ label: "所有", value: "" }];
          var b = a.concat(res.data);
          this.payChannel = b;
          if (
            this.getUserInfo().userType !== "main_admin" &&
            this.getUserInfo().userType !== "main_user"
          ) {
            this.payChannel = b.filter((item) => item.value != "ada");
          }
        }
      });
    },
    checkTime(time) {
      // let t = new Date().getDate();
      // 如果想包含本月本月 - 8.64e7 * t 就不需要了，
      // 如果想之前的不能选择把 > 换成 <
      return time.getTime() > Date.now();
    },
    //重置操作
    resetFields() {
      this.resetForm("checkAccountForm");
      // this.commandForm = {
      //   billDate: "",
      //   payformChannel: "",
      // };
      // this.$refs["checkAccountForm"].resetFields();
      // this.payChannelTypeList = [];
    },
    getList() {
      this.$http
        .post("/api/billGatherData/search", {
          ...this.dataForm,
        })
        .then((res) => {
          if (res.code == "0000") {
            console.log(res.data);
            this.dataList = res.data;
          }
        })
        .catch(() => {});
    },
    // handleChannel(val) {
    //     if (val) {
    //       this.payChannelTypeList = this.payChannelType[val]
    //     } else {

    //       this.payChannelTypeList = []
    //     }
    //     this.commandForm.payType = ''
    //   },
    handleClick() {},
  },
};
</script>

<style scoped lang="scss">
.switch {
  margin-bottom: 20px;
}
:deep(.el-table__expand-icon) {
  position: absolute;
  left: 40px;
}
</style>
